<template>
    <el-row style="background-color: #fff;height: 100%;" class="padd20">
        <el-row>
            <el-col class="title box box-pack-between box-align-center">
                <el-page-header @back="$router.go(-1)" content="证书详情">
                </el-page-header>
                <div class="btn">
                    <el-button class="reset-comfirm-btn" @click="export2Excel">导出</el-button>
                </div>
            </el-col>

        </el-row>

        <el-row class="mt20">
            <el-col>
                <el-table :data="page.list" stripe style="width: 100%"
                    :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column type="index" label="序号" width="80" align="center">
                        <template slot-scope="scope">
                            <span>{{(page.pageNum - 1) * page.pageSize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="xj" label="学级" width="80" :show-overflow-tooltip="true" align="center">
                    </el-table-column>
                    <el-table-column prop="zymc" label="专业" :show-overflow-tooltip="true" align="center">
                    </el-table-column>
                    <el-table-column prop="bjmc" label="班级" :show-overflow-tooltip="true" align="center">
                    </el-table-column>
                    <el-table-column prop="stuName" label="姓名" width="80" :show-overflow-tooltip="true" align="center">
                    </el-table-column>
                    <el-table-column prop="sn" label="学号" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="cousScore" label="课程分" width="120" align="center"></el-table-column>
                    <el-table-column prop="ldsjScore" label="实践分" width="120" align="center"></el-table-column>
                    <!--                    <el-table-column prop="attchScore" label="附加项得分" width="120" align="center"></el-table-column>
                    <el-table-column prop="zongheScore" label="综合得分" width="120" align="center"></el-table-column> -->
                </el-table>
            </el-col>
            <el-col class="mt20">
                <el-pagination @current-change="descPage" background layout="prev, pager, next" :total="page.total"
                    :current-page="page.pageNum" hide-on-single-page></el-pagination>
            </el-col>
        </el-row>

    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                page: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
                tkzt: false,
                selectVal: '',
                searchText: '',
                title: '添加',
                schoolid: this.$store.getters.getLoginInfo.user.schoolId,
                xqList: [],
                resetList: []
            };
        },
        created() {
            this.descPage();
        },
        methods: {
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            openPopup() {
                this.tkzt = true
            },
            resetData(total) {
                let params = {
                    certpubid: this.$route.params.certpubid,
                    pageSize: total
                };
                this.$api.Admin.descPage(params).then(res => {
                    if (res.code == '0') {
                        this.resetList = res.list.list;
                    }
                })
            },
            descPage(pageNum) {
                let params = {
                    certpubid: this.$route.params.certpubid,
                    pageNum: pageNum
                };
                this.$api.Admin.descPage(params).then(res => {
                    if (res.code == '0') {
                        this.page = res.list;
                        this.resetData(res.list.total)
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            export2Excel() {
                if (this.resetList.length == 0) {
                    this.$message.warning("暂无数据可以导出")
                } else {
                    require.ensure([], () => {
                        const {
                            export_json_to_excel
                        } = require('@/vendor/Export2Excel');
                        const tHeader = ['学级', '专业', '班级', '姓名', '学号', '课程任务得分',
                            '实践任务得分', '附加项得分', '综合得分'
                        ]; //生成Excel表格的头部标题栏
                        const filterVal = ['xj', 'zymc', 'bjmc', 'stuName', 'sn',
                            'cousScore', 'ldsjScore', 'attchScore', 'zongheScore'
                        ]; //生成Excel表格的内容栏（根据自己的数据内容属性填写）
                        const list = this.resetList; //需要导出Excel的数据
                        const data = this.formatJson(filterVal, list);
                        // export_json_to_excel(tHeader, data, '');
                        export_json_to_excel(tHeader, data, '证书详情'); //这里可以定义你的Excel表的默认名称
                    })
                }
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }
        }
    }
</script>

<style scoped lang="scss">
    .bf-btn {
        padding: 3px 5px;
        width: 64px;
        height: 24px;
        background: linear-gradient(-7deg, #FF9B4F, #FFBC3A);
        border-radius: 12px;
        color: #fff;
        cursor: pointer;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
